import { useState, useEffect } from "react"
import { Button, Table } from "antd"

function Demo3() {
    const [count, setCount] = useState(0)

    function dispatch(action) {
        switch (action) {
            case 0:
                setCount(count + 1)
                break
            case 1:
                setCount(count - 1)
                break
        }
    }

    const dataSource = [
        { type: "无依赖", time: "组件初始化/更新时执行", example: "useEffect(() => {})" },
        { type: "空数组依赖", time: "组件初始化时执行1次", example: "useEffect(() => {}, [])" },
        { type: "有依赖", time: "初始化/依赖变化时执行", example: "useEffect(() => {}, [count])" },
        { type: "return一个函数", time: "组件卸载时执行", example: "useEffect(() => { return () => {},[] })" },
    ]

    const columns = [
        { title: "依赖", dataIndex: "type", key: "type" },
        { title: "执行时机", dataIndex: "time", key: "time" },
        { title: "示例", dataIndex: "example", key: "example" },
    ]

    useEffect(() => {
        console.log("组件初始化/更新")
    }) // 没有依赖， 组件初始化/组件更新时执行。

    useEffect(() => {
        console.log("dom挂载")
    }, []) // 空依赖，只在组件初始化时执行一次（开发环境执行2次，除非删除<StrictMode> 标签）。类似 componentDidMount

    useEffect(() => {
        console.log("初始化/依赖变化时更新")
    }, [count]) // 依赖count，当初始化/count变化时执行。 类似componentDidUpdate shouldComponentUpdate

    useEffect(() => {
        return () => {
            console.log("卸载")
        }
    }, []) // return 一个函数，表示组件卸载时执行。类似componentWillUnmount

    return (
        <div className="main_box">
            <h1>本案例展示 组件中数据监听useEffect的使用 （class组件见demo1_2）</h1>

            <div className="main_row">
                <p>useEffect是react中用于监听数据变化的函数，当数据发生变化时，会自动执行useEffect中的回调函数,同时也可以作为组件的生命周期函数使用</p>
                <div>
                    当前count: {count} <Button onClick={() => dispatch(0)}>count++</Button>
                    <Button onClick={() => dispatch(1)}>count--</Button>
                </div>
                <div className="main_text">
                    {/* antd Table 表格,显示边框 */}
                    <Table dataSource={dataSource} columns={columns} pagination={false} bordered />
                </div>
            </div>
        </div>
    )
}

export default Demo3
